<template>
  <div class="aui-wrapper aui-page__not-found">
    <div class="aui-content__wrapper">
      <div class="bg_img">
        <h1 class="error_name">{{name}}</h1>
        <h2 class="trade_no">{{trade_no?'流水号：'+ trade_no :''}}</h2>
        <p class="errCode">{{errCode}}</p>
        <div>
          <a class="error_url" :href="url">确定</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { openWXPay } from '@/utils/pay'
export default {
  data () {
    return {
      trade_no: '',
      name: '',
      url: '',
      errCode: '',
      WxData: {
        returnUrl: '',
        appid: '',
        stimeStamp: '',
        nonceStr: '',
        prepay_id: '',
        signType: 'MD5',
        sign: ''
      }
    }
  },
  methods: {
    getUrlData () {
      this.trade_no = this.$route.query.trade_no ? this.$route.query.trade_no : ''
      this.name = this.$route.query.name ? this.$route.query.name : ''
      this.url = this.$route.query.url ? this.$route.query.url : 'javascript:;'
      this.errCode = this.$route.query.errCode ? this.$route.query.errCode : ''
      // 微信支付数据
      this.WxData.returnUrl = this.$route.query.returnUrl ? this.$route.query.returnUrl : ''
      this.WxData.appid = this.$route.query.appid ? this.$route.query.appid : ''
      this.WxData.stimeStamp = this.$route.query.stimeStamp ? this.$route.query.stimeStamp : ''
      this.WxData.nonceStr = this.$route.query.nonceStr ? this.$route.query.nonceStr : ''
      this.WxData.prepay_id = this.$route.query.prepay_id ? this.$route.query.prepay_id : ''
      this.WxData.signType = this.$route.query.signType ? this.$route.query.signType : ''
      this.WxData.sign = this.$route.query.sign ? this.$route.query.sign : ''
    }
  },
  mounted () {
    this.getUrlData()
    this.$nextTick(() => {
      if (this.WxData.nonceStr) {
        openWXPay(this.WxData)
      }
    })
  }
}
</script>
<style lang="scss" scoped>
  .bg_img{
    background: #4629A9 url("../../assets/img/error_bg.png") no-repeat center;
    background-size: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 10%;
    .error_name{
      font-size: 3rem;
      color: #ffffff;
      margin: 1rem 0;
      text-align: left;
    }
    .trade_no{
      font-size: 1rem;
      color: #ffffff;
      margin: 1rem 0;
      text-align: left;
    }
    .errCode{
      font-size: 1rem;
      color: #ffffff;
      margin: 1rem 0;
      text-align: left;
    }
    .error_url{
      margin-top: 1rem;
      display: inline-block;
      background-color: #E24B2D;
      border: 0;
      border-radius: 10rem;
      box-shadow: 0 0 4rem rgba(226,75,45,0.2);
      color: #ffffff;
      font-size: 1rem;
      padding: 1rem 3rem;
      text-align: left;
      text-decoration: none;
    }
  }
</style>
